<template>
  <div class="authContainer">
    <div class="timeCont">
      <div class="bannerCont">
        <img class="bannerImg" src="/img/banner/8.png" />
      </div>
      <div class="formCont">
        <div class="formTitle">合作申请表</div>
        <div class="formInput">
          <div class="inputName">您的姓名</div>
          <input
            v-model="formInfo.real_name"
            type="text"
            maxlength="5"
            placeholder="请输入您的姓名"
          />
        </div>
        <div class="formInput">
          <div class="inputName">您的性别</div>
          <div class="inputOut">
            <div class="inputMask" @click="sexShow = true"></div>
            <input v-model="formInfo.sex" placeholder="请选择您的性别" />
          </div>
          <div @click="sexShow = true" class="iconfont icon-xiala"></div>
        </div>
        <div class="formInput">
          <div class="inputName">联系号码</div>
          <input
            v-model="formInfo.mobile"
            type="tel"
            maxlength="11"
            placeholder="请输入您的手机号"
          />
          <div
            :class="checkPhone() && !isGetting ? 'getCode' : 'disgetCode'"
            @click="getCode"
          >
            {{ codeText }}
          </div>
        </div>
        <div class="formInput">
          <div class="inputName">验证码</div>
          <input
            v-model="formInfo.code"
            type="tel"
            maxlength="11"
            placeholder="请输入验证码"
          />
        </div>
        <div class="formInput">
          <div class="inputName">微信号</div>
          <input
            v-model="formInfo.wechat"
            type="text"
            maxlength="18"
            placeholder="请输入您的微信号"
          />
        </div>

        <div class="saveBtn" @click="saveFn">提交合作申请</div>
      </div>
    </div>
    <van-popup
      :close-on-click-overlay="false"
      v-model:show="sexShow"
      round
      position="bottom"
    >
      <div class="maskCont">
        <div class="maskHead">您的性别是？</div>
        <div class="maskCheck">
          <div
            @click="sexFn(item)"
            :class="
              item.id == sexId
                ? 'maskCheckItemActive maskCheckItem'
                : 'maskCheckItem'
            "
            :key="index"
            v-for="(item, index) in sexArr"
          >
            {{ item.name }}
          </div>
        </div>
        <div class="maskBtn" @click="sexSureFn">确认选择</div>
      </div>
    </van-popup>
    <subLoad v-if="showSub"></subLoad>
  </div>
</template>
<script>
import { showSuccessToast, showFailToast, showToast } from "vant";
import { Sendsms, cooperateApply } from "@/http/api";
import { showConfirmDialog } from "vant";
import subLoad from "@/components/public/subLoad.vue";

export default {
  components: { subLoad },
  name: "",
  data() {
    return {
      showSub: false,
      formInfo: {
        mobile: "",
        real_name: "",
        email: "",
        code: "",
        sex: "",
      },
      // 孩子性别
      sexShow: false,
      sexId: 0,
      sexArr: [
        { name: "男", id: 0 },
        { name: "女", id: 1 },
      ],
      // 获取验证码
      codeText: "获取验证码",
      isGetting: false, //是否正处于获取中
    };
  },
  props: {},
  setup() {},
  methods: {
    saveFn() {
      let data = this.formInfo;
      if (!data.real_name.length) {
        showToast("请输入您的姓名");
        return false;
      } else if (!data.sex) {
        showToast("请选择您的性别");
        return false;
      } else if (!this.checkPhone()) {
        showToast("请输入正确的联系号码");
        return false;
      } else if (data.code.length != 4) {
        showToast("请输入正确的验证码");
        return false;
      } else if (!data.wechat) {
        showToast("请输入微信号");
        return false;
      }
      if (!this.showSub) {
        this.showSub = true;
        cooperateApply(data)
          .then((res) => {
            if (res.data.code == 1) {
              showConfirmDialog({
                title: "申请成功",
                confirmButtonText: "拨打电话",
                message:
                  "我们收到您的申请，会尽快安排相关负责人联系你，请注意接听。您也可以致电：18483613963，联系我们。",
              })
                .then(() => {
                  // on confirm
                  window.location.href = "tel:18483613963";
                })
                .catch(() => {
                  // on cancel
                });
            } else {
              showToast(res.data.msg);
            }
            this.showSub = false;
          })
          .catch(() => {
            this.showSub = false;
          });
      }
    },
    sexSureFn() {
      this.formInfo.sex = this.sexArr[this.sexId].name;
      this.sexShow = false;
    },
    sexFn(item) {
      this.formInfo.sex = item.name;
      this.sexId = item.id;
    },
    checkPhone() {
      let reg = /^1[3456789]{1}\d{9}$/;
      if (reg.test(this.formInfo.mobile)) {
        return true;
      } else {
        return false;
      }
    },
    getCode() {
      let result = this.checkPhone();
      if (!this.isGetting && result) {
        this.isGetting = true;
        let timer = null;
        let num = 60;
        this.getSendsms(this.formInfo.mobile);
        timer = setInterval(() => {
          if (num > 0) {
            num--;
            this.codeText = num + "s后重试";
          } else {
            this.codeText = "重新获取";
            this.isGetting = false;
            clearInterval(timer);
          }
        }, 1000);
      }
    },
    getSendsms(mobile) {
      let data = {
        mobile: mobile,
      };
      Sendsms(data)
        .then((res) => {
          if (res.data.code == 1) {
            showSuccessToast("发送成功");
          } else {
            showFailToast("发送失败");
          }
        })
        .catch((err) => {
          showFailToast("网络超时");
        });
    },
  },
  mounted() {},
  created() {},
};
</script>
<style scoped lang="less">
.authContainer {
  background-color: #e7eeff;
  box-sizing: border-box;
  padding-bottom: 0.75rem;
  min-height: 100vh;
  .bannerCont {
    width: 100%;
    color: #fff;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    .bannerImg {
      width: 100%;
    }
  }
  .formCont {
    background-color: #fff;
    width: 92%;
    margin: 0 auto;
    position: relative;
    margin-top: -3rem;
    padding: 1rem 4%;
    border-radius: 0.75rem;
    box-sizing: border-box;
    .formTitle {
      font-size: 0.8rem;
      font-weight: bold;
      margin-bottom: 1rem;
      .iconfont {
        color: #86a9fb;
        font-size: 1rem;
        margin-right: 0.25rem;
        position: relative;
        top: 0.05rem;
      }
    }
    .formInput,
    .textareaItem {
      display: flex;
      padding: 0.75rem 1rem;
      box-sizing: border-box;
      align-items: center;
      width: 100%;
      background-color: #f6f7f9;
      margin-bottom: 1rem;
      border-radius: 1.5rem;
      .inputName {
        width: 3.2rem;
      }
      input {
        flex: 1;
        width: 3rem;
        border: none;
        background: none;
        outline: none;
      }
      .getCode {
        color: #86a9fb;
        font-size: 0.6rem;
      }
      .disgetCode {
        color: #ccc;
        font-size: 0.6rem;
      }
    }
    .textareaItem {
      align-items: start;
      .inputName {
        line-height: 1.9rem;
      }
    }
    .icon-xiala {
      width: 1.5rem;
      font-size: 0.8rem;
      color: #ccc;
      text-align: center;
    }
    .inputOut {
      flex: 1;
      width: 3rem;
      position: relative;
      .inputMask {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
      }
      input {
        width: 90%;
        border: none;
        background: none;
        outline: none;
      }
    }
    .saveBtn {
      width: 100%;
      padding: 0.75rem 0;
      text-align: center;
      background-image: linear-gradient(to right, #cbd8f7, #86a9fb);
      color: #fff;
      border-radius: 2rem;
    }
  }
  .maskCont {
    padding: 1.5rem 4%;
    box-sizing: border-box;
    .maskHead {
      width: 100%;
      text-align: center;
      font-size: 1rem;
      font-weight: bold;
      margin-bottom: 1.5rem;
    }
    .maskCheck {
      width: 100%;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      .maskCheckItem {
        width: 46%;
        text-align: center;
        background-color: #f6f7f9;
        padding: 0.65rem 0;
        margin-bottom: 0.75rem;
        border-radius: 0.25rem;
      }
      .maskCheckItemActive {
        background-color: #86a9fb;
        color: #fff;
      }
    }
    .maskBtn {
      width: 100%;
      text-align: center;
      padding: 0.65rem 0;
      background-color: #86a9fb;
      border: 1px solid #86a9fb;
      color: #fff;
      border-radius: 2rem;
      margin-top: 1.5rem;
    }
  }
}
</style>
